<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/user/common/CSSandJS1 :: head('注  册')"></head>
<body>
<!--wrapper start-->
<div class="wrapper">

    <!--== Start Preloader Content ==-->
    <div class="preloader-wrap">
        <div class="preloader">
            <span class="dot"></span>
            <div class="dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <!--== End Preloader Content ==-->

    <!--== Start Header Wrapper ==-->
    <div  th:replace="/user/common/header2 :: header(${cartList}, ${totalMoney})"></div>
    <!--== End Header Wrapper ==-->

    <main class="main-content">
        <!--== Start Page Header Area Wrapper ==-->
        <div class="page-header-area">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <div class="page-header-content">
                            <nav class="breadcrumb-area">
                                <ul class="breadcrumb">
                                    <li><a href="index.html">Home</a></li>
                                    <li class="breadcrumb-sep">/</li>
                                    <li>Account</li>
                                </ul>
                            </nav>
                            <h4 class="title">Account</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--== End Page Header Area Wrapper ==-->

        <!--== Start Account Area Wrapper ==-->
        <section class="account-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-8 m-auto">
                        <div class="account-form-wrap">
                            <!--== Start Login Form ==-->
                            <div class="login-form">
                                <div class="content">
                                    <h4 class="title">Register</h4>
                                    <p>Please Register using account detail bellow.</p>
                                    <div style="color: red" th:text="${msg}"/>
                                </div>
                                <form th:action="@{/main/user/register}">
                                    <div class="row">

                                        <div class="col-12">
                                            <div class="form-group">
                                                <input th:id="username" class="form-control" type="text" placeholder="Usernaem" name="username">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <input th:id="password" class="form-control" type="password" placeholder="Password" name="password">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <input th:id="repassword" class="form-control" type="password" placeholder="RePassword" name="repassword">
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="login-form-group">
                                                <button th:id="register" class="btn-sign"  type="button">Register</button>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="account-optional-group">
                                                <a class="btn-create" th:href="@{/user/login}">Login account?</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--== End Login Form ==-->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--== End Account Area Wrapper ==-->
    </main>

    <!--== Start Footer Area Wrapper ==-->
    <footer th:replace="/user/common/footer :: footer"></footer>
    <!--== End Footer Area Wrapper ==-->

    <!--== Scroll Top Button ==-->
    <div id="scroll-to-top" class="scroll-to-top"><span class="fa fa-angle-double-up"></span></div>

    <!--== Start Quick View Menu ==-->
    <aside th:replace="/user/common/aside :: aside"></aside>
</div>

<!--=======================Javascript============================-->
<div th:replace="/user/common/CSSandJS1 :: js"></div>

<script>
    var flag = 1;
    $("#username").blur(function () {
        let name = $("#username").val();
        console.log("vv=="+name);
        $.ajax({
            url: "/tUser/findUserByName",
            type: "get",
            data: {"name": name},
            success: function (res){
                if(res === "ok"){
                    layer.msg('用户已存在请重新输入用户名！');
                    console.log('res===='+res);
                    flag = 0;
                }else {
                    flag = 1;
                }
            }
        });
    });
    $("#repassword").blur(function () {
        let name = $("#username").val();
        let pwd = $("#password").val();
        let rpwd = $("#repassword").val();
        if (rpwd !== pwd || pwd === ''){
            flag = 0;
            layer.msg('两次输入密码不一致,请重新输入！');
        }else {
            flag = 1;
        }
    });
    $("#register").click(function () {
        let name = $("#username").val();
        let pwd = $("#password").val();
        let rpwd = $("#repassword").val();
        if (flag){
            $.ajax({
                url: "/tUser/insertUser",
                type: "get",
                data: {"name": name, "pwd": pwd},
                success: function (res){
                    if(res === "ok"){
                        layer.msg('注册成功。');
                        console.log('res===='+res);
                    }
                }
            });
        }else {
            layer.msg('用户名或密码有误请重新输入！');
        }
    });
</script>
</body>

</html>